<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>mootools demos - Drag and Drop</title>
	
	<link rel="stylesheet" type="text/css" media="screen" href="http://demos111.mootools.net/styles/reset.css?v=1" />
	<link rel="stylesheet" type="text/css" media="screen" href="http://demos111.mootools.net/styles/style.css?v=1" />
	<link rel="stylesheet" type="text/css" media="screen" href="http://demos111.mootools.net/styles/header.css?v=1" />
	
	<link rel="stylesheet" type="text/css" media="screen" href="http://demos111.mootools.net/demos/DragDrop/style.css" />
	
	<script type="text/javascript" src="http://demos111.mootools.net/demos/mootools.svn.js"></script>
	<script type="text/javascript" src="http://demos111.mootools.net/scripts/demos.js"></script>
	
	<link rel="shortcut icon" href="http://demos111.mootools.net/icon.png?v=1" type="image/x-icon" />
	
	<script type="text/javascript">
		window.addEvent('domready', function(){
			var fx = [];
			
			$$('#draggables div').each(function(drag){
				new Drag.Move(drag, {
					droppables: $$('#droppables div')
				});
				
				drag.addEvent('emptydrop', function(){
					this.setStyle('background-color', '#faec8f');
				});
			});
			
			$$('#droppables div').each(function(drop, index){
				fx[index] = drop.effects({transition:Fx.Transitions.Back.easeOut});
				drop.addEvents({
					'over': function(el, obj){
						this.setStyle('background-color', '#78ba91');
					},
					'leave': function(el, obj){
						this.setStyle('background-color', '#1d1d20');
					},
					'drop': function(el, obj){
						el.remove();
						fx[index].start({
							'height': this.getStyle('height').toInt() + 30,
							'background-color' : ['#78ba91', '#1d1d20']
						});
					}
				});
			});
			
		}); 
	</script>
	
</head>

<body style="background-color:white;">
	


			<div id="demo">
				
<div id="draggables">
	<div class="drag"></div>
	<div class="drag"></div>
	<div class="drag"></div>
	<div class="drag"></div>
	<div class="drag"></div>
	<div class="drag"></div>
	<div class="drag"></div>
	<div class="drag"></div>
	<div class="drag"></div>
	<div class="drag"></div>
</div>

<div id="droppables">
	<div class="drop"></div>
	<div class="drop"></div>
	<div class="drop"></div>
	<div class="drop"></div>
	<div class="drop"></div>
	<div class="drop"></div>
</div>
			</div>
	

<div id="container">

	<div id="content">This is content.
	
	<IFRAME SRC="http://it.sohu.com" TITLE="The Famous Recipe" style="width: 100%; height: 100%; border: 2px solid #ececec;">
		<!-- Alternate content for non-supporting browsers -->
		<H2>The Famous Recipe</H2>
		<H3>Ingredients</H3>
		...
	</IFRAME>

	</div>

</div>


</body>
</html>